<template>
  <van-row type="flex" class="course">
    <van-col :span="24" class="course-cover">
      <!-- <van-image :src="course.courseCover" width="100%" height="210" fit="cover"></van-image> -->
      <!-- <VideoPlayer :src="currentVideoSrc" :poster="course.courseCover"></VideoPlayer> -->
    </van-col>
    <van-col :span="24">
      <van-tabs>
        <van-tab title="介绍">
          <!-- 课程介绍 -->
          <Introduce :detail="course" :teacher="teacherDetail"></Introduce>
        </van-tab>
        <van-tab title="目录">
          <!-- 课程目录 -->
          <Catalogues :list="catalogues"></Catalogues>
        </van-tab>
      </van-tabs>
      

    </van-col>

    <van-col>
      <van-button @click="buy">购买</van-button>
    </van-col>
  </van-row>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import Catalogues from '@/components/Course/Catalogue'
import Introduce from '@/components/Course/Introduce'
import VideoPlayer from '@/components/Video/VideoPlayer'

import wx from '@/utils/wx'
import {appId} from '@/config/wxConfig'
export default {
  components: {
    Catalogues,
    Introduce,
    VideoPlayer
  },

  computed: {
    courseId () {
      return this.$route.query.id
    }, 

    ...mapState('course', {
      course: 'courseDetail',
    }),
    ...mapState("course", ['catalogues', 'teacherDetail', 'currentSrc']),
    ...mapGetters('course', ['currentVideoSrc'])
  },

  methods: {
    ...mapActions('course', ['getCourseDetail', 'getCatalogues']),
    buy () {
      wx().then(() => {
        location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?timestamp=${Math.random()}&appid=${appId}&redirect_uri=http://192.168.1.230:8080/accessToken?returnUrl=/course?id=28&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
      }).catch((err) => {
        console.log(err)
      })
    }
  },

  watch: {
    course: {
      handler (course) {
        window.title = course.courseName
      }
    }
  },

  async created () {
    
    await this.getCourseDetail(this.courseId)
    await this.getCatalogues(this.courseId)

    document.title = this.course.courseName

   
  }
}
</script>

<style>

</style>